<template>
  <div v-loading="isloading" class="prossececontainer">
    <div class="selectHeader">
      <div class="select-wrapper">
        <div class="selectBox">
          <div class="selectTitle">
            <i class="iconfont icon-sousuo" />按条件查询
          </div>

          <div>
            <el-select
              placeholder="领取级别"
              style="width: 150px"
              v-model="listquery.userType"
              clearable
            >
              <el-option
                v-for="(item, index) in unittype"
                :key="index"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="listquery.village"
              clearable
              placeholder="村庄名"
              style="width: 200px"
            ></el-input>

            <el-input
              v-model="listquery.receiveName"
              clearable
              placeholder="领取人名称"
              style="width: 200px"
            ></el-input>

            <el-input
              v-model="listquery.recordUser"
              clearable
              placeholder="发放人名称"
              style="width: 200px"
            ></el-input>

            <el-date-picker
              style="width: 370px"
              v-model="valueData"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="filter-item"
              @change="valueChange"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
               <el-button type="success" icon="el-icon-search" @click="search"
              >搜索</el-button
            >
            <el-button type="warning" icon="el-icon-refresh-left" @click="reset"
              >重置</el-button
            >
          </div>

          <div class="row-area" style="margin-top:10px">
            <span style="color: #4778c7">行政区域选择：</span>
            <el-select
              placeholder="所属市选择"
              v-model="currentLiindex"
              @change="cityChange"
              v-if="iscityshow"
              clearable
              @clear="cityclear"
            >
              <el-option
                v-for="(item, index) in citylist"
                :key="item.id"
                :label="item.label"
                :value="index"
              />
            </el-select>
            <ul class="countryArea" v-if="areaShow">
              <li
                v-for="(item, i) in cityChildren"
                :key="i"
                @click="liChange(i)"
                :class="{ areaActive: i == currentareaindex }"
              >
                {{ item.label }}
              </li>
            </ul>
            <el-select
              placeholder="乡镇选择"
              v-model="town"
              @change="townChange"
              v-if="istownshow"
              clearable
            >
              <el-option
                v-for="item in townlist"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          
          </div>
        </div>

        <div class="searchBox2">
          <div class="daoButton" @click="download">
            <img src="@/assets/daochu.png" alt="" />
            <span>全部导出</span>
          </div>
        </div>
      </div>
    </div>

    <div>
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        class="eltable"
      >
        <el-table-column label="所属行政区划" width="300">
          　<template slot-scope="scope">
            <span
              >{{ scope.row.city }}-{{ scope.row.country }}-{{
                scope.row.town
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="village" label="被领取村庄" />
        <el-table-column prop="receiveOrganization" label="领取编制单位" />
        <el-table-column prop="receiveName" label="领取人" width="150" />
        <el-table-column prop="receivePhone" label="联系方式" width="150" />
        <el-table-column prop="receiveDate" label="领取时间 " width="180" />
        <el-table-column prop="recordUser" label="发放人" width="150" />
      </el-table>
      <el-pagination
        v-if="tableData.length > 0"
        class="elpagi"
        :total="total"
        @size-change="getdata"
        @current-change="getdata"
        @prev-click="getdata"
        @next-click="getdata"
        :current-page.sync="listquery.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="listquery.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
      />
    </div>
  </div>
</template>
<script>
import countHeader from "../components/countHeader";
import { datareceivelist } from "@/api/index.js";
import { export_json_to_excel } from "@/utils/export2Excel.js";
import queryMixin from "@/mixins/countquery.js";
import { mapGetters } from "vuex";
export default {
  components: {
    countHeader,
  },
  computed: {
    ...mapGetters(["citylist"]),
  },
  mixins: [queryMixin],

  data() {
    return {
      cityChildren: [],
      chooseshow: false,
      listquery: {
        pageSize: 10,
        currentPage: 1,
        receiveName: "",
        recordUser: "",
        completionYear: "",
        userType: "",
        city: "",
        country: "",
        town: "",
        village: "",
        isAgree: "",
      },
      filterShow: true,
      form: {},
      isloading: false,
      currentareaindex: 0,
      currentLiindex: 0,
      iswraploading: false,
      valueData: [],
      total: 0,
      city: "",
      areaShow: false,
      iscityshow: true,
      tableData: [],
      nowuserarea: "",
      unittype: [
        { name: "编制单位", value: "2" },
        { name: "自然资源局", value: "1" },
      ],
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    async getdata() {
      if (this.valueData !== null) {
        this.listquery.startDate = this.valueData[0];
        this.listquery.endDate = this.valueData[1];
      } else {
        this.listquery.startDate = null;
        this.listquery.endDate = null;
      }
      this.isloading = true;
      let res = await datareceivelist(this.listquery);
      this.tableData = res.data.content;
      this.total = res.data.totalElements;
      this.isloading = false;
    },
    download() {
      this.isloading = true;
      if (this.valueData !== null) {
        this.listquery.startDate = this.valueData[0];
        this.listquery.endDate = this.valueData[1];
      } else {
        this.listquery.startDate = null;
        this.listquery.endDate = null;
      }
      let query = {
        pageSize: 9999,
        currentPage: 1,
        receiveName: this.listquery.receiveName,
        recordUser: this.listquery.recordUser,
        startDate: this.listquery.startDate,
        endDate: this.listquery.endDate,
        city: this.listquery.city,
        country: this.listquery.country,
        town: this.listquery.town,
        village: this.listquery.village,
        isAgree: this.listquery.isAgree,
      };

      datareceivelist(query).then((res) => {
        let tablelist = res.data.content;
        this.downloadExcel(tablelist);
        this.isloading = false;
      });
    },
    downloadExcel(tabledatalist) {
      const tHeader = [
        "所属市",
        "所属区县",
        "所属乡镇",
        "村庄名",
        "领取人",
        "领取机构",
        "领取人电话",
        "领取时间",
        "发放人",
      ];
      const filterVal = [
        "city",
        "country",
        "town",
        "village",
        "receiveName",
        "receiveOrganization",
        "receivePhone",
        "receiveDate",
        "recordUser",
      ];
      const data = this.formatJson(filterVal, tabledatalist);
      export_json_to_excel({
        header: tHeader,
        data,
        filename: "底图底数领取信息汇总表",
      });
    },
    formatJson(filterVal, listdata) {
      return listdata.map((v) =>
        filterVal.map((j) => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../../public/css/table.scss";
@import "../../../../public/css/countheader.scss";

.prossececontainer {
  margin: 5px;
  padding-bottom: 10px;
  overflow-y: auto;
  position: relative;
  height: 100%;
}
.row-area {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.icondiv {
  background-color: #f2f2f2;
  display: flex;
  justify-content: center;
  span {
    background-color: #fff;
    display: inline-block;
    padding: 5px 10px;
    margin: 0 auto;
    font-size: 12px;
    color: #4778c7;
  }
}

.label-title {
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  vertical-align: middle;
  padding: 0 12px 0 0;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  font-weight: 700;
}
.countryArea {
  height: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;

  li {
    text-align: center;
    margin-right: 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 32px;
    cursor: pointer;
  }

  .active {
    border-bottom: 3px solid black;
  }
  .areaActive {
    background-color: #4cc8c7;
    color: #fff;
    border-radius: 5px;
    padding: 0 10px;
  }
}
</style>
